﻿
@{
    ViewBag.Title = null;
}

<body>
<div id="top" class="center tops">
    <div id="topwelcome">文字样式模拟展示</div>
    <input type="text" id="texts" class="form-control textinput" placeholder="输入" />
</div>
    <br/>
    <div id="html"></div>
</body>
<style>
    * {
        font-family: 'microsoft yahei';
    }

    .tops {
        margin-top: 450px;
    }
    .tops_margin_top {
         -webkit-animation: margin_top 1s forwards;
    }
    .center {
        text-align: center;
    }

    .textinput {
        width: 300px;
        display: inline-block;
    }

    #topwelcome {
        color: #f35626;
        background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-animation: hue 30s infinite linear;
        font-size: 40px;
    }
    /*文字变色*/
    @@-webkit-keyframes hue {
        from {
            -webkit-filter: hue-rotate(0deg);
        }

        to {
            -webkit-filter: hue-rotate(-360deg);
        }
    }

    @@-webkit-keyframes margin_top {
        from {
            margin-top: 450px;
        }

        to {
            margin-top: 10px;
        }
    }
</style>
<script type="text/javascript">
    $(function () {
        $("#texts").focus();
        $("#top").addClass('animated bounceInDown');
    });
    $(document).keypress(function (e) {
        // 回车键事件
        if (e.which == 13) {
            var text = $("#texts").val();
            if (text != "" && text != null) {
                $("#top").removeClass("bounceOutDown").removeClass("tops").addClass('tops_margin_top');
                $("#texts").addClass("texts_margin");
                $("#html").addClass('animated');
                $.post("/WelCome/Content", { "textav": text }, function (data) {
                    if ($("#html").html() == "") {
                        $("#html").addClass('bounceIn');
                        $("#html").html(data);
                    } else {
                        $("#html").removeClass('bounceIn');
                        $("#html").html(data);
                        $("#html").addClass('bounceIn');
                    }
                });
            }
        }
    });
</script>